<template>
  <div class="g-sd">
    <!-- 用户登录 -->
    <div class="n-user">
      <div class="n-myinfo" v-show="!$store.state.loginOfNot">
        <p class="note">
          登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
        </p>
        <a href="javascript:;" class="btn" @click.stop="login">用户登录</a>
      </div>
      <!-- 用户登录后的信息 -->
      <div class="user-data" v-show="$store.state.loginOfNot">
        <div class="data-top flex">
          <div class="data-left">
            <img :src="$store.state.avatarUrl" alt="" />
          </div>
          <div class="data-right">
            <a href="javascript:;" class="f-thide">{{
              this.$store.state.nickname
            }}</a>
            <p class="oblique">Lv.{{ this.$store.state.userData.level }}</p>
            <button class="sign" v-show="!isSign">签到</button>
            <button class="sign active" v-show="isSign">已签到</button>
            <!-- @click="signFn" -->
          </div>
        </div>
        <div class="data-bottom">
          <ul class="fans flex">
            <li style="padding-left: 0">
              <p>{{ this.$store.state.eventCount }}</p>
              <span>动态</span>
            </li>
            <li>
              <p>{{ this.$store.state.fllows }}</p>
              <span>关注</span>
            </li>
            <li style="border: none">
              <p>{{ this.$store.state.followeds }}</p>
              <span>粉丝</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 入驻歌手 -->
    <div class="n-singer">
      <h3 class="v-hd2">
        <span>入驻歌手</span>
        <a href="javascript:;" class="more">查看全部 ></a>
      </h3>
      <ul class="n-enter">
        <li>
          <a href="javascript:;" class="itm">
            <div class="head">
              <img src="../../assets/upload/singer1.jpg" alt="" />
            </div>
            <div class="ifo">
              <h4>
                <span>张惠妹aMEI</span>
              </h4>
              <p class="thide">台湾歌手张惠妹</p>
            </div>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="itm">
            <div class="head">
              <img src="../../assets/upload/singer2.jpg" alt="" />
            </div>
            <div class="ifo">
              <h4>
                <span>Fine乐团</span>
              </h4>
              <p class="thide">音乐人</p>
            </div>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="itm">
            <div class="head">
              <img src="../../assets/upload/singer3.jpg" alt="" />
            </div>
            <div class="ifo">
              <h4>
                <span>萬曉利</span>
              </h4>
              <p class="thide">民谣歌手、中国现代民谣的代表人物之一</p>
            </div>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="itm">
            <div class="head">
              <img src="../../assets/upload/singer4.jpg" alt="" />
            </div>
            <div class="ifo">
              <h4>
                <span>音乐人赵雷</span>
              </h4>
              <p class="thide">民谣歌手</p>
            </div>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="itm">
            <div class="head">
              <img src="../../assets/upload/singer5.jpg" alt="" />
            </div>
            <div class="ifo">
              <h4>
                <span>王三溥</span>
              </h4>
              <p class="thide">音乐人</p>
            </div>
          </a>
        </li>
      </ul>
      <!--  申请网易云音乐人模块 -->
      <div>
        <a href="javascript:;" class="u-btn u-btn-1">
          <i>申请成为网易音乐人</i>
        </a>
      </div>
    </div>
    <!-- 热门主播 -->
    <div class="n-dj">
      <h3 class="v-hd2">热门主播</h3>
      <ul class="n-hotdj">
        <li>
          <a href="javascript:;" class="cver">
            <img src="../../assets/upload/dj1.jpg" alt="" />
          </a>
          <div class="info">
            <p>
              <a href="javascript:;">陈立</a>
            </p>
            <p class="f-thide">心理学家、美食家陈立教授</p>
          </div>
        </li>
        <li>
          <a href="javascript:;" class="cver">
            <img src="../../assets/upload/dj2.jpg" alt="" />
          </a>
          <div class="info">
            <p>
              <a href="javascript:;">刘维-Julius</a>
            </p>
            <p class="f-thide">歌手、播客节目《维维道来》主理人</p>
          </div>
        </li>
        <li>
          <a href="javascript:;" class="cver">
            <img src="../../assets/upload/dj3.jpg" alt="" />
          </a>
          <div class="info">
            <p>
              <a href="javascript:;">莫非定律MoreFeel</a>
            </p>
            <p class="f-thide">男女双人全创作独立乐团</p>
          </div>
        </li>
        <li>
          <a href="javascript:;" class="cver">
            <img src="../../assets/upload/dj4.jpg" alt="" />
          </a>
          <div class="info">
            <p>
              <a href="javascript:;">碎嘴许美达</a>
            </p>
            <p class="f-thide">脱口秀网络红人</p>
          </div>
        </li>
        <li>
          <a href="javascript:;" class="cver">
            <img src="../../assets/upload/dj5.jpg" alt="" />
          </a>
          <div class="info">
            <p>
              <a href="javascript:;">银临Rachel</a>
            </p>
            <p class="f-thide">古风音乐人</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import { mapMutations } from "vuex";
// import { getSignApi } from "../../http/api";
export default {
  data() {
    return {
      isSign: false,
    };
  },
  created() {
    this.loginOfNotFn();
  },

  methods: {
    ...mapMutations({
      udateLoginShow: "login/udateLoginShow",
    }),
    // async signFn() {
    //   const res = await getSignApi({ type: 0 });
    //   if (res.code === 200) {
    //     this.isSign = true;
    //   }
    //   console.log(res);
    // },
    login() {
      this.udateLoginShow(true);
    },
    // 判断是否登录
    loginOfNotFn() {
      const userId = localStorage.getItem("userId");
      if (userId) {
        this.$store.state.loginOfNot = true;
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 右边小模块 */
.g-sd {
  position: relative;
  float: right;
  width: 250px;
  zoom: 1;
}
.n-myinfo {
  height: 126px;
  padding-top: 0;
  background: url("../../assets/images/index.png") no-repeat;
  background-position: 0 0;
}
.n-myinfo .note {
  width: 205px;
  margin: 0 auto;
  padding: 16px 0;
  line-height: 22px;
}
.n-myinfo .btn {
  margin: 0 auto;
  display: block;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 #8a060b;
  background: url("../../assets/images/index.png") no-repeat;
  background-position: 0 -195px;
}

/* 入驻歌手 */
.n-singer {
  margin-top: 15px;
}
.n-enter li {
  margin-top: 14px;
}
.v-hd2 {
  position: relative;
  height: 23px;
  margin: 0 20px;
  border-bottom: 1px solid #ccc;
  font-weight: 700;
  color: #333;
}
.v-hd2 .more {
  float: right;
  font-weight: normal;
  color: #666;
}
.n-enter {
  margin: 6px 0 14px 20px;
}
.n-enter li,
.n-enter .itm {
  float: left;
  width: 210px;
  height: 62px;
  background: #fafafa;
}
.n-enter .itm:hover {
  background: #f4f4f4;
}
.n-enter .head,
.n-enter .head img {
  float: left;
  width: 62px;
  height: 62px;
}
.n-enter .ifo {
  float: left;
  width: 133px;
  height: 60px;
  padding-left: 14px;
  border: 1px solid #e9e9e9;
  border-left: none;
}
.n-enter h4 {
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #333;
}
.n-enter p {
  width: 90%;
  margin-top: 8px;
  color: #666;
}
.n-enter .thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

/* 申请网易云音乐人模块 */
.n-singer .u-btn {
  margin-left: 20px;
  margin-top: 15px;
  border-radius: 4px;
}
.n-singer .u-btn i {
  font-style: normal;
  width: 170px;
  font-weight: bold;
}
.u-btn-1 i {
  color: #333;
  background: url("../../assets/images/button2.png") no-repeat;
  background-position: 0 -59px;
}
.u-btn i {
  padding: 0 15px 0 20px;
  pointer-events: none;
}
.u-btn-1 {
  color: #333;
  background: url("../../assets/images/button2.png") no-repeat;
  background-position: right -100px;
}
.u-btn {
  padding: 0 5px 0 0;
  white-space: nowrap;
}
.u-btn,
.u-btn i {
  display: inline-block;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
}

/* 热门主播 */
.n-dj {
  margin-top: 30px;
}
.n-hotdj {
  margin: 20px 0 0 20px;
}
.n-hotdj li {
  float: left;
  width: 210px;
  height: 50px;
}
.n-hotdj .cver {
  float: left;
  width: 40px;
  margin-right: 10px;
}
.n-hotdj .cver img {
  width: 40px;
  height: 40px;
  box-shadow: 0 0 1px #333333 inset;
}
.n-hotdj .info {
  float: left;
  width: 160px;
  line-height: 21px;
}
.n-hotdj p {
  width: 100%;
}
.n-hotdj p a {
  color: #000;
}
.n-hotdj p a:hover {
  text-decoration: underline;
  color: #000;
}
//用户信息框
.user-data {
  height: 192px;
  background: #f6f6f6;
  border-bottom: #b2b2b2 1px solid;
  padding-top: 22px;
  padding-left: 22px;
  box-sizing: border-box;
  .data-left {
    width: 88px;
    height: 88px;
    border: solid 1px #dadada;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 80px;
      /* height: 80px; */
    }
  }
  .data-right {
    margin-left: 18px;
    padding-top: 6px;
    box-sizing: border-box;
    a {
      line-height: 14px;
      margin-bottom: 6px;
      font-weight: 700;
      color: #333333;
      font-size: 14px;
      display: block;
      width: 110px;
    }
    p {
      width: 40px;
      height: 18px;
      border: #9a9a9a solid 1px;
      border-radius: 8px;
      text-align: center;
      line-height: 18px;
      box-sizing: border-box;
      font-style: oblique;
      margin-bottom: 15px;
      color: #a1a1a1;
      font-weight: 700;
    }
    .sign {
      width: 100px;
      height: 30px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      cursor: pointer;
      color: #ffecee;
      background: #1f70c0;
      &:hover {
        background: #589fe0;
      }
      &.active {
        background: #eaeaea;
        color: #bebebe;
      }
    }
  }
  .data-bottom {
    margin-top: 20px;
    li {
      width: 26;
      padding: 0 18px;
      border-right: 1px solid #e4e4e4;
      box-sizing: border-box;
      color: #666666;
    }
    p {
      font-size: 20px;
      line-height: 28px;
    }
  }
}
</style>